<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}个人工具网站集{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 响应式设计 - 适配PC端1920+和笔记本 */
        @media (min-width: 1920px) {
            .container { max-width: 1800px; }
            .tool-grid { grid-template-columns: repeat(4, 1fr); }
        }
        
        @media (min-width: 1440px) and (max-width: 1919px) {
            .container { max-width: 1400px; }
            .tool-grid { grid-template-columns: repeat(3, 1fr); }
        }
        
        @media (min-width: 1024px) and (max-width: 1439px) {
            .container { max-width: 1200px; }
            .tool-grid { grid-template-columns: repeat(2, 1fr); }
        }
        
        .tool-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .sidebar-item:hover, .sidebar-item.active {
            background-color: #f0f7ff;
            border-left: 3px solid #3b82f6;
            color: #3b82f6;
        }
        
        .upload-area {
            border: 2px dashed #cbd5e0;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .upload-area:hover {
            border-color: #3b82f6;
            background-color: #f7fafc;
        }
        
        .upload-area.dragover {
            border-color: #3b82f6;
            background-color: #ebf8ff;
        }
        
        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .slide-in {
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm border-b border-gray-200">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <!-- Logo和导航 -->
                <div class="flex items-center">
                    <div class="text-2xl font-bold text-blue-600 mr-8">
                        <i class="fas fa-tools mr-2"></i>
                        <a href="{{ url_for('index') }}" class="hover:text-blue-700">工具集</a>
                    </div>
                    <nav class="flex space-x-6">
                        <a href="{{ url_for('index') }}" class="text-gray-800 hover:text-blue-600 font-medium transition-colors">首页</a>
                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">个人博客</a>
                    </nav>
                </div>
                
                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    {% if session.user_id %}
                        <div class="flex items-center space-x-3">
                            <span class="text-gray-700">欢迎，{{ session.username }}</span>
                            <a href="{{ url_for('profile') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
                                <i class="fas fa-user mr-1"></i>个人中心
                            </a>
                            <a href="{{ url_for('logout') }}" class="text-gray-600 hover:text-red-600 transition-colors">
                                <i class="fas fa-sign-out-alt mr-1"></i>退出
                            </a>
                        </div>
                    {% else %}
                        <div class="flex items-center space-x-3">
                            <a href="{{ url_for('login') }}" class="text-gray-600 hover:text-blue-600 transition-colors">
                                <i class="far fa-user mr-1"></i>登录
                            </a>
                            <a href="{{ url_for('register') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
                                注册
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </header>
    
    <!-- 消息提示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="container mx-auto px-6 py-4">
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'success' if category == 'success' else 'error' }} mb-4 p-4 rounded-lg fade-in
                        {% if category == 'success' %}bg-green-100 border border-green-400 text-green-700{% else %}bg-red-100 border border-red-400 text-red-700{% endif %}">
                        <div class="flex items-center">
                            <i class="fas fa-{{ 'check-circle' if category == 'success' else 'exclamation-circle' }} mr-2"></i>
                            {{ message }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}
    
    <!-- 主要内容区 -->
    <main class="container mx-auto px-6 py-8">
        {% block content %}{% endblock %}
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-16">
        <div class="container mx-auto px-6 py-8">
            <div class="text-center text-gray-600">
                <p>&copy; 2024 个人工具网站集. 所有权利保留.</p>
                <p class="mt-2 text-sm">让工作更高效，让生活更便捷</p>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 自动隐藏消息提示
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 500);
            });
        }, 5000);
        
        // 拖拽上传功能
        function setupDragAndDrop(element) {
            if (!element) return;
            
            element.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('dragover');
            });
            
            element.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
            });
            
            element.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    const fileInput = this.querySelector('input[type="file"]');
                    if (fileInput) {
                        fileInput.files = files;
                        // 触发文件选择事件
                        const event = new Event('change', { bubbles: true });
                        fileInput.dispatchEvent(event);
                    }
                }
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化拖拽上传
            const uploadAreas = document.querySelectorAll('.upload-area');
            uploadAreas.forEach(setupDragAndDrop);
            
            // 添加页面加载动画
            document.body.classList.add('fade-in');
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>